<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>车辆信息</title>
    <link rel="stylesheet" href="/css/bootstrap.min.css">
    <link rel="stylesheet" href="/css/laypage.css">
    <script src="/js/jquery/jquery.min.js"></script>
    <script src="/js/vue/vue.min.js"></script>
    <script src="/js/car.js"></script>
    <script src="/js/laypage/laypage.js" charset="utf-8"></script>
    <script src="/js/layer/layer.js" charset="utf-8"></script>


    <style type="text/css">
        .imageMy {
            width: 120px;
            height: 100px;
        }
    </style>

</head>
<body>
<script src="/js/webSocket.js"></script>
<section id="container">
<#include "sider.ftl">
    <section id="main-content">
        <section class="wrapper">

            <div id="app" class="container" style="width:100%">

                <div class="table-agile-info">
                    <div class="panel panel-default" id="app">
                        <section class="panel">
                            <div class="panel-heading">
                                车辆基本信息表
                            </div>
                            <form class="form-inline bg-warning" role="form">
                                车牌号查询：
                                <div class="form-group">
                                    <label class="sr-only" for="licenseNum">车牌号</label>
                                    <input type="text" class="form-control" id="licenseNum" placeholder="车牌号">
                                </div>
                                <button type="button" id="findCars" class="btn btn-success">查询</button>
                            </form>
                            <div>
                                <table class="table">
                                    <thead>
                                    <tr class="success">
                                        <td>序号</td>
                                        <td>车主</td>
                                        <td>车牌</td>
                                        <td>图片</td>
                                        <td>购买时间</td>
                                        <td>PIN</td>
                                        <td>品牌</td>
                                        <td>型号</td>
                                        <td>添加时间</td>
                                        <td>出险次数</td>
                                        <td>处理人</td>
                                  <@shiro.hasAnyRoles name="admin,manager,user">
                                        <td>修改</td>
                                        <td>删除</td>
                                  </@shiro.hasAnyRoles>
                                    </tr>
                                    </thead>
                                    <tbody>
                                    <tr class="action" v-for="(item,index) in result">
                                        <td>{{index+1}}</td>
                                        <td>{{item.user.sname}}</td>
                                        <td>{{item.licenseNum}}</td>
                                        <td>
                                            <img :src="/Path/+item.pic" class="imageMy"/>
                                        </td>
                                        <td>{{item.buyDate}}</td>
                                        <td>{{item.pinNum}}</td>
                                        <td>{{item.brand}}</td>
                                        <td>{{item.brandType}}</td>
                                        <td>{{item.addTime}}</td>
                                        <td>{{item.riskNum}}</td>
                                        <td>{{item.evaluator}}</td>
                                        <@shiro.hasAnyRoles name="admin,user,manager">
                                        <td>
                                            <input class="btn btn-success" type="button"
                                                   @click="editEvent(item.carUuid)"
                                                   value="修改">
                                        </td>

                                        <td>
                                            <input class="btn btn-success" type="button"
                                                   @click="updateEvent(item.carUuid)"
                                                   value="删除">
                                        </td>
                                        </@shiro.hasAnyRoles>
                                    </tr>
                                    <tr>
                                        <td colspan="5">
                                            <div id="pagenav"></div>
                                        </td>
                                    </tr>
                                    </tbody>
                                </table>
                            </div>
                        </section>
                    </div>
                </div>
            </div>
        </section>
    </section>
     <#include "foot.ftl"><#--引入底部-->
</section>
</section>
</body>
</html>
<#--jia-->
<script>
    var app = new Vue({
        el: '#app',
        data: {
            result: []
        }
    });
    //查询用户数据
    var getCarsPageList = function (curr) {
        $.ajax({
            type: 'POST',
            url: '/cars/findLikeCars',
            dataType: 'json',
            data: {
                pageSize: 4,
                pageNum: curr || 1,
                licenseNum: $("#licenseNum").val()
            },
            success: function (msg) {
                app.result = msg.page;
                laypage({
                    cont: 'pagenav',
                    pages: msg.totalPage,
                    skin: '#cac4cd',
                    first: '第一页',
                    last: '最后一页',
                    curr: curr || 1,
                    jump: function (obj, first) {
                        if (!first) {
                            getCarsPageList(obj.curr);
                        }
                    }
                });
            }
        });
    };

    getCarsPageList();

    $("#findCars").click(function () {
        getCarsPageList();
    });

    //删除车辆信息
    var updateEvent = function (id) {
        layer.confirm('确认删除吗？', {
            btn: ['是', '否']
        }, function () {
            $.ajax({
                type: 'GET',
                dataType: "JSON",
                url: '/cars/update_cars',
                data: {
                    carUuid: id
                },
                success: function (msg) {
                    getCarsPageList();
                    layer.msg('删除成功', {icon: 6});
                }
            });
        }, function () {

        });
    }


    var editEvent = function (id) {
        layer.open({
            type: 2,
            title: '修改车辆信息',
            fix: true,
            maxmin: true,
            shadeClose: true,
            area: ['1230px', '800px'],
            content: '/cars/toCarId?carUuid=' + id,
            end: function () {
                getCarsPageList();
            }
        });
    }
</script>










